<!-- 此页面是管理员端——数据管理——4评分管理界面 -->
<template>
  <div class="container">
    <!--    标题-->
    <div slot="header" class="clearfix">
      <h3>评分列表</h3>
    </div>
    <!--    筛选区域-->
    <div class="search-form">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <!-- 毕业年份下拉框 -->
        <el-form-item label="毕业年份">
          <el-select
              v-model="searchForm.graduationYear"
              clearable
              placeholder="请选择毕业年份"
              style="width: 200px"
          >
            <el-option
                v-for="item in graduationYearOptions"
                :key="item"
                :label="item"
                :value="item"
            />
          </el-select>
        </el-form-item>
        <!-- 学生学号+姓名下拉框 -->
        <el-form-item label="学生">
          <el-select
              v-model="searchForm.studentAccount"
              clearable
              placeholder="请选择学生"
              style="width: 200px"
          >
            <el-option
                v-for="item in studentOptions"
                :key="item"
                :label="item.account + ' ' + item.name"
                :value="item.account"
            />
          </el-select>
        </el-form-item>
        <!-- 论文题目模糊查询 -->
        <el-form-item label="论文题目">
          <el-input
              v-model="searchForm.paperTitle"
              placeholder="请输入论文题目"
              clearable
          />
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item style="display: block;">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--    表格-->
    <el-table :data="paperList" class="table">
      <el-table-column prop="paperTitle" label="论文题目" width="190" />
      <el-table-column prop="studentAccount" label="学生学号" width="130" />
      <el-table-column prop="studentName" label="学生姓名" width="90" />
      <el-table-column prop="oneScore1" label="选题意义得分" width="70" />
      <el-table-column prop="oneScore2" label="选题意义得分" width="70" />
      <el-table-column prop="oneScore3" label="选题意义得分" width="70" />
      <el-table-column prop="oneScore4" label="选题意义得分" width="70" />
      <el-table-column prop="oneScore5" label="选题意义得分" width="70" />
      <el-table-column prop="totalScore" label="总分" width="70" />
      <!-- 操作列 -->
      <el-table-column label="操作" width="150" align="center">
        <template #default="scope">
          <el-button
              type="primary"
              size="small"
              @click="openDialog(scope.row)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页-->
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        class="pagination"
    />

<!--    弹窗部分-->
    <el-dialog
        v-model="dialogVisible"
        title="论文评分详情"
        width="60%"
    >
      <!-- 顶部信息 -->
      <div class="paper-info">
        <p>
          <strong>题目：</strong>{{ paperData.paperTitle }}
        </p>
        <p>
          <strong>学生学号：</strong>{{ paperData.studentAccount }}
          &nbsp;&nbsp;&nbsp;
          <strong>学生姓名：</strong>{{ paperData.studentName }}
          &nbsp;&nbsp;&nbsp;
          <strong>总分：</strong>{{ paperData.totalScore }}
        </p>
      </div>

      <!-- 详情表格 -->
      <el-table
          :data="tableData"
          border
          style="width: 100%; margin-top: 15px;"
          :span-method="mergeCells"
      >
        <el-table-column prop="firstLevel" label="一级指标" align="center" width="180" />
        <el-table-column prop="secondLevel" label="二级指标" align="center" />
        <el-table-column prop="suggest" label="依据及建议" align="left" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';
import ElementPlus, {ElMessage, ElMessageBox} from 'element-plus';
import {
  getAllGraduationYears,
  getAllStudentAccountAndName,
  getAllPaperScore,
  getByStudentAccount
} from "../../../api/facultyAdmin.js";

/*
  搜索与表单
 */
// 存放加载后的评分列表 loadPaperList()
const paperList = ref([]);

// 分页数据
const currentPage = ref(1)
const total = ref(0)
const pageSize = ref(10)

// 搜索表单数据
const searchForm = ref({
  graduationYear: '',
  studentAccount: '',
  paperTitle: ''
});

// 下拉选项（接口动态获取）
const graduationYearOptions = ref([]);
const studentOptions = ref([]);

// 页面加载时获取数据
onBeforeMount(async () => {
  // 加载论文列表
  await loadPaperList();

  // 获取毕业年份列表
  try {
    const graduationYearRes = await getAllGraduationYears({
      facultyId: 1
    })
    graduationYearOptions.value = graduationYearRes.data;
  } catch (e) {
    ElMessage.error("毕业年份获取失败");
  }

  // 获取学生学号和姓名列表
  try {
    const studentRes = await getAllStudentAccountAndName({
      facultyId: 1
    })
    studentOptions.value = studentRes.data;
  } catch (e) {
    ElMessage.error("学生信息获取失败");
  }
})

// 加载论文列表信息
const loadPaperList = async () => {
  try {
    const res = await getAllPaperScore({
      currentPage: currentPage.value,
      pageSize: pageSize.value,
      facultyId: 1,
      graduationYear: searchForm.value.graduationYear || null,
      studentAccount: searchForm.value.studentAccount || null,
      paperTitle: searchForm.value.paperTitle || null
    })
    console.log(res)
    paperList.value = res.data.records
    total.value = res.data.total
  } catch (e) {
    ElMessage.error("论文元数据获取失败")
  }
}

// 页码改变处理
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  loadPaperList()
}

// 搜索事件
const handleSearch = () => {
  currentPage.value = 1; // 重置为第一页
  loadPaperList();
};

const resetSearch = () => {
  searchForm.value = {
    graduationYear: '',
    studentAccount: '',
    paperTitle: ''
  };
  currentPage.value = 1;
  loadPaperList();
}

/*
  查看详情
 */
const dialogVisible = ref(false);
const paperData = ref({});   // 存放详情信息
const tableData = ref([]);   // 存放处理后的表格数据

// 一级、二级分组规则
const firstLevelIds = [1, 4, 7, 10, 15];
const secondLevelGroups = [
  [2, 3],
  [5, 6],
  [8, 9],
  [11, 12, 13, 14],
  [16, 17]
];

// 打开弹窗
const openDialog = async (row) => {
  try {
    // 调用接口，传当前行的 studentAccount
    const res = await getByStudentAccount({ studentAccount: row.studentAccount });
    if (res.code === 1) {
      paperData.value = res.data;

      // 处理二级指标表格数据
      tableData.value = [];
      secondLevelGroups.forEach((group, index) => {
        const first = paperData.value.factors.find(f => f.factorId === firstLevelIds[index]);
        const firstText = `${first.factorName}(${(first.weight * 100).toFixed(0)}%)：${first.score}分`;

        group.forEach((fid, i) => {
          const sec = paperData.value.factors.find(f => f.factorId === fid);
          const secondText = `${sec.factorName}(${(sec.weight * 100).toFixed(0)}%)：${sec.score}分`;
          tableData.value.push({
            firstLevel: i === 0 ? firstText : "",
            secondLevel: secondText,
            suggest: sec.suggest
          });
        });
      });
      dialogVisible.value = true;
    }
  } catch (err) {
    ElMessage.info(err.msg);
  }
};

// 合并单元格方法
const mergeCells = ({ rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    const groupSizes = [2, 2, 2, 4, 2];
    let start = 0;
    for (let size of groupSizes) {
      if (rowIndex === start) {
        return { rowspan: size, colspan: 1 };
      }
      if (rowIndex > start && rowIndex < start + size) {
        return { rowspan: 0, colspan: 0 };
      }
      start += size;
    }
  }
};
</script>

<style scoped>
/* 整体容器 */
.container {
  padding: 30px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(58, 194, 159, 0.1);
  margin: 20px;
}

/* 表头区域 */
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 10px;
}

.clearfix h3 {
  color: rgb(48, 49, 51);
  font-size: 24px;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(58, 194, 159, 0.2);
  position: relative;
  padding-left: 20px;
}

.clearfix h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: linear-gradient(180deg, #3ac29f 0%, #3a7bd5 100%);
  border-radius: 2px;
}

/* 添加按钮 */
.float-right {
  background: linear-gradient(135deg, #3ac29f 0%, #3a7bd5 100%);
  border: none;
  border-radius: 12px;
  padding: 18px 20px !important;
  color: white !important;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.float-right:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(58, 194, 159, 0.3);
}

/* 表格样式 */
.table {
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #ebeef5;
}

:deep(.el-table__header) {
  background: linear-gradient(135deg, #f8ffff 0%, #f3f9ff 100%);
}

:deep(.el-table__header th) {
  background: transparent;
  color: rgba(0, 0, 0, 0.44);
  font-weight: 600;
}

:deep(.el-table__row) {
  transition: all 0.3s ease;
  color: rgba(0, 0, 0, 0.75);
}

:deep(.el-table__row:hover) {
  transform: translateX(5px);
  box-shadow: 4px 0 8px rgba(58, 194, 159, 0.1);
}

.search-form {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
  flex-wrap: wrap; /* 如果子元素太多超出屏幕宽度，可以换行 */
}

.search-form .el-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.search-form .el-form-item {
  margin-right: 20px; /* 每个表单项之间的间距 */
  align-items: center; /* 垂直居中对齐 */
}

.search-form .el-form-item:last-child {
  margin-right: 0; /* 最后一个表单项不需要右边距 */
}

/* 操作按钮 */
.cell {
  display: flex;
  gap: 12px;
}

.el-button {
  border: none;
  border-radius: 8px;
  padding: 8px 15px;
  transition: all 0.3s ease;
}

.el-button:first-child {
  background: linear-gradient(135deg, #3ac29f30 0%, #3a7bd530 100%);
  color: #3a7bd5;
}
/*
.el-button:last-child {
  background: linear-gradient(135deg, #ff6b6b30 0%, #ff475730 100%);
  color: #ff4757;
}
*/
.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.el-button i {
  margin-right: 6px;
}

/* 隔行颜色 */
:deep(.el-table__row--striped) {
  background: #f8fafc;
}
/* 弹窗 */
.dialog-edit {
  border-radius: 20px;
  overflow: hidden;
}
/* 调整按钮间距 */
.cell {
  gap: 8px !important;
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #f8ffff 0%, #f3f9ff 100%);
  margin-right: 0;
  padding: 20px 30px;
  border-bottom: 1px solid #e8f4ff;
}

:deep(.el-dialog__title) {
  color: #3a7bd5;
  font-size: 20px;
  font-weight: 600;
  position: relative;
  padding-left: 18px;
}

:deep(.el-dialog__title::before) {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: linear-gradient(180deg, #3ac29f 0%, #3a7bd5 100%);
  border-radius: 2px;
}

:deep(.el-dialog__body) {
  padding: 30px 40px;
}


.analyse-dialog-content {
  max-height: 60vh;
  overflow-y: auto;
  line-height: 1.8;
  padding: 0 10px;
  white-space: pre-wrap;
}

.form-inline {
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(2, 1fr);
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-input__wrapper) {
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 2px 6px rgba(58, 194, 159, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 4px 12px rgba(58, 194, 159, 0.2);
  transform: scale(1.02);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding: 20px 30px;
  border-top: 1px solid #e8f4ff;
}

.footer-button {
  background: linear-gradient(135deg, #3ac29f 0%, #3a7bd5 100%);
  border: none;
  border-radius: 12px;
  color: white !important;
  padding: 12px 28px;
  transition: all 0.3s ease;
}

.footer-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(58, 194, 159, 0.3);
}

:deep(.el-dialog) {
  border-radius: 20px;
}

/* 分页样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 15px 0;
}
/* 分页动效 */
:deep(.el-pagination.is-background .el-pager li) {
  transition: all 0.3s ease;
}
:deep(.el-pagination.is-background .el-pager li:hover) {
  transform: scale(1.1);
}
:deep(.el-pagination.is-background .el-pager li.active) {
  background: linear-gradient(135deg, #3ac29f 0%, #3a7bd5 100%);
}

.paper-info {
  margin-bottom: 10px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .container {
    margin: 10px;
    padding: 20px;
  }

  .clearfix {
    flex-direction: column;
    gap: 15px;
  }

  .float-right {
    width: 100%;
  }
  .form-inline {
    grid-template-columns: 1fr;
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }

  .dialog-footer {
    padding: 15px 20px;
  }

  .pagination {
    justify-content: center;
  }
}
</style>